<template>
  <div class="app-container" style="width: 40%">
    <el-form ref="form" :model="drivingRecord" label-width="80px">
      <el-form-item label="车辆号码">


        <el-select v-model="drivingRecord.carId" placeholder="选择车牌号码" label-width="80px" disabled>
          <el-option
            v-for="item in carNo1"
            :key="item.id"
            :label="item.carNo"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="部门">
        <el-select v-model="drivingRecord.deptId" placeholder="选择部门" label-width="80px" disabled>
          <el-option
            v-for="item in dept"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="出车时间">
        <el-input v-model="drivingRecord.beginTime" :readonly="drivingRecord"></el-input>
      </el-form-item>

      <el-form-item label="预计回车时间">
        <el-input v-model="drivingRecord.preBacktime" :readonly="drivingRecord" ></el-input>
      </el-form-item>

      <el-form-item label="随行人员">
        <el-input v-model="drivingRecord.personnel" :readonly="drivingRecord" ></el-input>
      </el-form-item>

      <el-form-item label="驾驶员">
        <el-select v-model="drivingRecord.driverId" placeholder="选择驾驶员" label-width="80px"  disabled>
          <el-option
            v-for="item in driver"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目的地">
        <el-input v-model="drivingRecord.destination":readonly="drivingRecord" ></el-input>
      </el-form-item>

      <el-form-item label="出车原因">
        <el-input v-model="drivingRecord.reason":readonly="drivingRecord" ></el-input>
      </el-form-item>

      <el-form-item label="开始里程">
        <el-input v-model="drivingRecord.startMil":readonly="drivingRecord" ></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>


<script>
//-- 导入api
import carApi from "@/api/rao_car.js";
import driverApi from "@/api/rao_driver.js";
//-- 引入组件
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
export default {
  data() {
    return {
      carNo1:{},
      super1:{},
      dept:{},
      state:{},
      driver:{},

      drivingRecord: {
        carId: '',
        deptId: '',
        beginTime: '',
        preBacktime: '',
        personnel:'',
        driverId:'',
        destination:'',
        reason:'',
        startMil:'',
      },
      createDate: new Date().getTime(),
      // 开始时间限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.drivingRecord.preBacktime) {
            // eslint-disable-next-line max-len
            return time.getTime() > new Date(this.drivingRecord.preBacktime).getTime() || time.getTime() <= new Date(this.createDate).getTime() - 86400000;
          }
          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
        },
      },

      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.drivingRecord.beginTime) {
            return time.getTime() < new Date(this.drivingRecord.beginTime).getTime();
          }
          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
        },
      },


    };
  },
  created() {
    this.init();
    //获取所有的供应商
    //获取所有部门
    this.getDeptById();
    this.getCarNo();
    this.getDriver();
    this.getDriverRecordById();

  },
  watch: {
    //-- 监听路由是否有发生变化
    $route(to, form) {
      this.init();
    },
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getDriverRecordById(id);
      } else {
        this.drivingRecord = {};
      }
    },
    //-- 保存和更新是同一个页面，那form表单的提交方法
    saveOrUpdate() {
      if (!this.drivingRecord.id) {
        this.saveDrivingRecord();
      } else {
        this.updateDrivingRecord();
      }
    },
    //-- 单纯保存的方法
    saveDrivingRecord() {
      carApi.saveDrivingRecord(this.drivingRecord).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "添加成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/daily_work/driving_record" });
      });
    },
    //-- 单纯修改的方法
    updateDrivingRecord() {
      carApi.updateDriverRecord(this.drivingRecord).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "修改成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/daily_work/driving_record" });
      });
    },

    getDriverRecordById(id) {
      carApi.findDriverRecordById(id).then((response) => {
        this.drivingRecord = response.data.items;
      });
    },

    //获得所有的部门
    getDeptById(){
      driverApi.getDept().then((response) => {
        this.dept = response.data.dept;
      })
    },

    //获得所有车辆的状态
    getState(){
      carApi.getDicById(35).then((response)=>{
        //通过品牌id来获取对应的text
        this.state=response.data.items;
      })
    },
    //获取未出车的车辆信息
    getCarNo(){
      carApi.getCarNo().then((response)=>{
        //通过品牌id来获取对应的text
        this.carNo1=response.data.items;
      })
    },
    getDriver(){
      carApi.getDriver().then((response)=>{
        //通过品牌id来获取对应的text
        this.driver=response.data.items;
      })
    },


  },
};
</script>
<style>
</style>
